<template>
    <div class="find-container">
        <!-- 轮播图 -->
        <div class="banner">
            <el-carousel arrow="never" indicator-position="none" ref="carousel" :interval="5000" type="card" @click.native="linkTo">
                <el-carousel-item v-for="item in banners.length" :key="item">
                    <h3 class="medium">
                        <el-image :src="banners[item-1].imageUrl"></el-image>
                    </h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 热门歌单列表 -->
        <div class="hot-music-list">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane  disabled label="热门歌单" >
                    </el-tab-pane>
                    <!-- 全部 歌单，固定单独的分类 -->
                    <el-tab-pane label="全部" name="全部" >
                        <!-- 网易云接口返回了重复的id，需要观察下是否一直这样 -->
                        <div   @click="songsheetclick(item.id)" class="songsheet" v-for="item in hotmusiclist" :key="item.id" >
                            <div class="songsheet-images" >
                                <el-image class="coverimg" :src="item.coverImgUrl" :lazy="true" v-if="item.coverImgUrl!==null"></el-image>
                                <el-image class="avatarimg" :src="item.creator.avatarUrl" lazy></el-image>
                            </div>
                            <p class="song-name">{{item.name}}</p>
                            <div class="creator">
                                by
                                <span class="creator-name">{{item.creator.nickname}}</span>
                            </div>
                            <div class="playcount">
                                {{item.playCount | countFormat}}
                                <i class="el-icon-sort-up"></i>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 请求接口，将 歌曲分类 循环渲染 -->
                    <el-tab-pane v-for="item in categorylist" :label="item.name" :name="item.name" :key="item.name">
                        <!-- 请求接口，将 热门歌单 循环渲染 -->
                        <div @click="songsheetclick(item.id)" class="songsheet" v-for="item in hotmusiclist" :key="item.id">
                            <div class="songsheet-images" >
                                <el-image class="coverimg" :src="item.coverImgUrl" lazy></el-image>
                                <el-image class="avatarimg" :src="item.creator.avatarUrl" lazy></el-image>
                            </div>
                            <p class="song-name">{{item.name}}</p>
                            <div class="creator">
                                by
                                <span class="creator-name">{{item.creator.nickname}}</span>
                            </div>
                            <div class="playcount">
                                {{item.playCount | countFormat}}
                                <i class="el-icon-sort-up"></i>
                            </div>
                        </div>
                    </el-tab-pane>

                </el-tabs>

            <!-- 分页 -->

            <div class="pagination">
                <el-pagination
                v-if="showPaginationVisable"
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :page-size="48"
                :total="total">
            </el-pagination>
            </div>

        </div>
        <!-- footer 底部留白 -->
        <div style="height: 100px;" class="footer"></div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      banners: [],
      activeName: '全部',
      categorylist: [],
      //   获取热门歌单参数
      queryinfo: {
        limit: 48,
        cat: '全部',
        offset: 0
      },
      hotmusiclist: [],
      //   歌单总条数
      total: '',
      //   控制分页组件的显示，让其在页面加载完后再显示
      showPaginationVisable: false
    }
  },
  created () {
    // 进入页面  获取banner
    this.getBannerImg()
    // 获取 热门歌曲分类
    this.getHotCategorylist()
    // 进入页面  获取歌单 hotmusiclist
    this.getHotMusicList()
  },
  methods: {
    //   获取banner
    async getBannerImg () {
      const { data: res } = await this.$http.get('/banner')
      if (res.code !== 200) return this.$message.error('获取音乐链接失败')
      this.banners = res.banners
    },
    // 点击 banner 如果有链接 跳转链接
    linkTo () {
    // 获取当前激活的index
      var activeIndex = this.$refs.carousel.activeIndex
      //   console.log('activeIndex:', activeIndex)
      //   console.log('this.banners[activeIndex]:', this.banners[activeIndex])
      if (this.banners[activeIndex].url) {
        window.open(this.banners[activeIndex].url)
      }
    },
    // 获取热门歌曲分类
    async getHotCategorylist () {
      const { data: res } = await this.$http.get('/playlist/hot', { params: this.queryinfo })
      if (res.code !== 200) return this.$message.error('获取歌曲分类失败')
      this.categorylist = res.tags
      console.log('getHotCategorylist categorylist:', this.categorylist)
    },
    // 获取热门歌单
    async getHotMusicList () {
      this.loading = true
      setTimeout(() => (this.loading = false), 2000)
      const { data: res } = await this.$http.get('/top/playlist', { params: this.queryinfo })
      if (res.code !== 200) return this.$message.error('获取歌单失败')
      this.hotmusiclist = res.playlists
      this.total = res.total
      console.log('hotmusiclist:', this.hotmusiclist)

      // 当列表数据渲染完成后再显示分页控件
      this.$nextTick(() => {
        this.showPaginationVisable = true
      })
    },
    // 点击 tab 触发事件
    handleClick (e) {
      this.loading = true
      setTimeout(() => (this.loading = false), 2000)

      console.log(e.name)
      this.queryinfo.cat = e.name
      //   重置页码
      this.queryinfo.offset = 0
      console.log('handleClick this.queryinfo:', this.queryinfo)
      this.getHotMusicList()
    },
    // 监听 页码 变化时间
    handleCurrentChange (pageNum) {
      console.log(pageNum)
      this.queryinfo.offset = pageNum - 1
      this.getHotMusicList()
    },
    //  点击歌单跳转详情
    songsheetclick (Id) {
      console.log(Id)
      //   跳转页面
      this.$router.push({ path: `/songsheet/songsheetdetail/${Id}` })
    }
  }
}
</script>

<style  scoped>
.find-container{
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}

/* 去除上方的间距 */
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.99;
    margin: 0;
  }
  /* 使用穿透 修改轮播图高度 */
   >>> .el-carousel__container {
    /* height: 200px; */
    /* 设高度为0，padding-top基于父元素宽度的20%，使得可以随宽度变化 高度自适应 */
    height: 0;
    padding-top: 20%;
}
/* tabs 样式 */
/* 修改被禁用标签字体 */
>>>.el-tabs__item.is-disabled {
    color: #333;
    font-weight: 600;
}
>>>.el-tabs__active-bar {
    background-color: #7bed9f;
}
>>>.el-tabs__item.is-active {
     color: #333;
    font-weight: 700;
}
>>>.el-tabs__item {
    padding: 0 10px;
    font-size: 14px;

}
/* 隐藏 底部线 */
>>>.el-tabs__nav-wrap::after {
    display: none;
    }

/* 歌曲列表样式 */
.songsheet {
    overflow: hidden;
    position: relative;
    float: left;
    margin: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    width: calc(12.5% - 20px);
    cursor: pointer;

}
/* 监听屏幕的宽度，当宽度小于1000px时，元素属性改变 */
    @media screen and (max-width:750px){
        .songsheet{
                width: calc(25% - 20px);
            }
        }
/* 封面和头像图片样式 */
.songsheet-images{
    /* 只有父元素设置 position为absolute或relative 时，子元素用absolute才能相对于当前父元素定位，否则
    会继续向上找已经定位过的父元素 */
    position: relative;
    width:100%;
    /* 为了保持高度与宽度一致--1 */
    height: 0;
    padding-top: 100%;
    /* 图片拉近时，高度会变大，因此需要隐藏高度上溢出的部分 */
    overflow: hidden;
}
/* 鼠标悬浮时，图片拉近效果 */
.coverimg:hover {
    /* 悬浮时拉近图片 */
    transform: scale(1.1);
    /* 延时 */
    transition: all 1s ease 0s;
}
/* 封面图片样式 */
.coverimg {
    border-radius: 3px;
     /* max-height: 135px; */
     /* 缩小时，延时1s */
     transform: scale(1);
     /* 延时 */
     transition: all 1s ease 0s;
    /* 父元素有了padding值，子元素则需修改定位 以显示在正确位置 -2*/
     position: absolute;
     top: 0;
}

/* 歌曲创建人头像图片样式 */

.avatarimg{
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 25%;
    border-radius: 50%;
}
/* 歌曲名称样式 */
.song-name {
    overflow: hidden;
    font-weight: 700;
    /* 视窗百分比 */
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    /* 父元素百分比 随内容自适应*/
    height:37px;
    display: -webkit-box;
     -webkit-box-orient:vertical;
    -webkit-line-clamp: 2;
}
.creator{
    margin-top: 8px;
    font-size: 14px;
    overflow: hidden;
    color: #666;
    /* 文本不换行 */
    white-space: nowrap;
    /* 显示省略号 */
    text-overflow: ellipsis;
    line-height: 18px;
}
.creator-name{
    color: #666;
}
/* 播放量样式 */
.playcount{
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 70%;
    color: #fff;
    background: rgba(0,0,0,.6);
    padding: 5% 5%;
    /* 延时 */
    transition: 0.4s ease-out;
    border-bottom-left-radius: 5px;
    cursor: pointer;
    transition: all 0.4s ease 0s;
}
/* 鼠标悬浮在歌曲上时 改变播放数量的样式 */
.songsheet:hover .playcount {
    color: #2ed573;
    transition: all 0.4s ease 0s;
}
.el-icon-sort-up{
    transition: all 0.4s ease 0s;
}
/* 鼠标悬浮在歌曲上时 改变播放数量 icon 的样式 */
.songsheet:hover .playcount .el-icon-sort-up{
    /* 悬浮 90 度 */
    transform: rotate(90deg);
    /* 加粗 */
    font-weight: 1000;
    /* 延时 */
    transition: all 0.4s ease 0s;
}
/* 分页样式 */
.pagination{
    width: 100%;
    /* 实现元素水平居中 */
        display: flex;
        justify-content: center;
}
/* 分页选中页面的背景色 */
>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #242628;
}
/* 分页鼠标悬浮时的字体颜色 */
>>>.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #242628;
    font-weight: 1000;
}
</style>
